<template>
  <div class="newFaceCourse">
    <el-form ref="newCourseForm" :model="newCourseForm" :rules="newCourseRules" label-width="120px">
      <div class="nav-title">基本信息</div>
      <el-form-item label="课程名称" prop="courseName">
        <el-input
          v-model="newCourseForm.courseName"
          placeholder="请输入课程名称（建议字数在14字以内，不超过45个字）"
          maxlength="45"
          style="width:500px;"
        />
      </el-form-item>
      <el-form-item label="课程简介">
        <el-input
          :rows="2"
          v-model="newCourseForm.courseIntro"
          type="textarea"
          placeholder="请输入课程简介"
          maxlength="45"
          style="width:500px;"
        />
      </el-form-item>
      <el-form-item label="课程封面" prop="imageUrl">
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
        >
          <img v-if="newCourseForm.imageUrl" :src="newCourseForm.imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <div class="hint-color">建议尺寸750*650px或者比例4:3，jpg或png格式，图片小于5M</div>
      </el-form-item>
      <el-form-item label="课程详情">
        <tinymce :height="150" v-model="newCourseForm.courseInfo" style="width:800px;" />
      </el-form-item>
      <div class="nav-title">售卖信息</div>
      <el-form-item label="面授课类型" prop="courseType">
        <el-radio-group v-model="newCourseForm.courseType">
          <el-radio label="trial">体验课</el-radio>
          <el-radio label="official">正式课</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="newCourseForm.courseType=='official'" label="关联课程" prop="course">
        <el-button v-show="!newCourseForm.course" @click="selectCourseDialog=true">选择课程</el-button>
        <div v-show="newCourseForm.course" class="course-tag">
          <div class="course-title">{{ newCourseForm.course }}</div>
          <el-button v-show="newCourseForm.course" @click="selectCourseDialog=true">更换课程</el-button>
        </div>
      </el-form-item>
      <el-form-item
        v-if="newCourseForm.courseType=='official'&&newCourseForm.courseId"
        label="售卖方式"
        prop="sellWay"
      >
        <el-radio-group v-model="newCourseForm.sellWay">
          <el-radio :disabled="!(courseList.indexOf('按课时')> -1)" label="hour">按课时</el-radio>
          <el-radio :disabled="!(courseList.indexOf('按时段')> -1)" label="time">按时段</el-radio>
          <el-radio :disabled="!(courseList.indexOf('按班级')> -1)" label="class">按班级</el-radio>
        </el-radio-group>
      </el-form-item>
      <div
        v-show="newCourseForm.courseType=='official'&&newCourseForm.courseId"
        class="chargeStandard"
      >
        <div v-show="newCourseForm.sellWay=='hour'">
          <el-table
            :data="newCourseForm.hourTable"
            :header-cell-style="{background:'#fafbfc',color:'#606266'}"
          >
            <el-table-column label="课时" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.courseHour"
                  :oninput="oninput"
                  size="small"
                  placeholder="0"
                  style="width:80px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="自定义规格名称" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                  size="small"
                  placeholder="如：3课时"
                  style="width:130px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.price"
                  :oninput="oninput"
                  size="small"
                  placeholder="0.00"
                  style="width:80px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="商品数量" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.number"
                  :oninput="oninput"
                  size="small"
                  placeholder="0"
                  style="width:80px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="hourRemove(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="add-foot">
            <el-button type="text" icon="el-icon-plus" @click="addHour">添加课时</el-button>
          </div>
        </div>
        <div v-show="newCourseForm.sellWay=='time'">
          <el-table
            :data="newCourseForm.timeTable"
            :header-cell-style="{background:'#fafbfc',color:'#606266'}"
          >
            <el-table-column label="课时" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.courseTime"
                  :oninput="oninput"
                  size="small"
                  class="timeInput"
                >
                  <template slot="append">
                    <el-select v-model="scope.row.period">
                      <el-option
                        v-for="item in periodOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="自定义规格名称" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                  size="small"
                  placeholder="如：3课时"
                  style="width:130px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.price"
                  :oninput="oninput"
                  size="small"
                  placeholder="0.00"
                  style="width:80px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="商品数量" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.number"
                  :oninput="oninput"
                  size="small"
                  placeholder="0"
                  style="width:80px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="timeRemove(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="add-foot">
            <el-button type="text" icon="el-icon-plus" @click="addTime">添加课时</el-button>
          </div>
        </div>
        <div v-show="newCourseForm.sellWay=='class'">
          <el-table
            :data="newCourseForm.classTable"
            :header-cell-style="{background:'#fafbfc',color:'#606266'}"
          >
            <el-table-column label="课时" align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.grade"
                  filterable
                  value-key="id"
                  @change="classSelectClick($event,scope.$index)"
                >
                  <el-option
                    v-for="item in gradeOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="自定义规格名称" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                  size="small"
                  placeholder="如：3课时"
                  style="width:120px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="上课时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.startTime }}</span>
                <span>至</span>
                <span>{{ scope.row.endTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.price"
                  :oninput="oninput"
                  size="small"
                  placeholder="0.00"
                  style="width:80px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="商品数量" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.number"
                  :oninput="oninput"
                  size="small"
                  placeholder="0"
                  style="width:80px;"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="classHourRemove(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="add-foot">
            <el-button type="text" icon="el-icon-plus" @click="addClassHour">添加课时</el-button>
          </div>
        </div>
      </div>
      <el-form-item v-if="newCourseForm.courseType=='trial'" label="商品价格" prop="articlePrice">
        <el-input
          v-model="newCourseForm.articlePrice"
          :oninput="oninput"
          placeholder="请输入商品价格"
          style="width:500px;"
        >
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="划线价格">
        <el-input
          v-model="newCourseForm.linePrice"
          :oninput="oninput"
          placeholder="请输入商品划线价格"
          style="width:500px;"
        >
          <template slot="append">元</template>
        </el-input>
        <div class="hint-color">商品没有其他优惠时情况下，划线价格在商品详情会已划线形式显示。</div>
      </el-form-item>
      <el-form-item v-show="newCourseForm.courseType=='trial'" label="课程数量" prop="articleNum">
        <el-input
          v-model="newCourseForm.articleNum"
          :oninput="oninput"
          placeholder="请输入商品数量"
          style="width:500px;"
        >
          <template slot="append">个</template>
        </el-input>
      </el-form-item>
      <el-form-item label="限购设置">
        <span>每人累积可购买</span>
        <el-input
          v-model="newCourseForm.restriction"
          :oninput="oninput"
          size="small"
          style="width:150px;"
        >
          <template slot="append">次</template>
        </el-input>
      </el-form-item>
      <div class="nav-title">其他</div>
      <el-form-item v-show="newCourseForm.courseType=='trial'" label="开课时间" prop="startTime">
        <el-date-picker
          v-model="newCourseForm.startClassTime"
          :picker-options="pickerOptions0"
          type="date"
          placeholder="选择开始日期"
        />
        <span style="margin:0 10px;">至</span>
        <el-date-picker
          v-model="newCourseForm.endClassTime"
          :picker-options="pickerOptions1"
          type="date"
          placeholder="选择结束日期"
        />
      </el-form-item>
      <el-form-item label="老师">
        <el-button v-show="!newCourseForm.teacher" @click="selectTeacherDialog=true">选择老师</el-button>
        <div v-show="newCourseForm.teacher" class="course-tag">
          <div class="course-title">{{ newCourseForm.teacher }}</div>
          <el-button v-show="newCourseForm.teacher" @click="selectTeacherDialog=true">更换老师</el-button>
        </div>
      </el-form-item>
      <el-form-item label="上课地点">
        <el-button v-show="!newCourseForm.campus" @click="selectCampusDialog=true">选择校区</el-button>
        <div v-show="newCourseForm.campus" class="course-tag">
          <div class="course-title">{{ newCourseForm.campus }}</div>
          <el-button v-show="newCourseForm.campus" @click="selectCampusDialog=true">更换校区</el-button>
        </div>
      </el-form-item>
      <el-form-item label="引导关注" class="multistage">
        <el-radio-group v-model="newCourseForm.guide">
          <el-radio label="open">开启</el-radio>
          <el-radio label="close">关闭</el-radio>
        </el-radio-group>
        <div class="hint-color">开启引导关注将会在课程购买成功页面展示引导内容</div>
        <el-form-item
          v-if="newCourseForm.guide=='open'"
          label="引导关注文案"
          prop="guideWriting"
          class="inner-label"
        >
          <el-input
            v-model="newCourseForm.guideWriting"
            placeholder="请输入引导文案"
            maxlength="14"
            style="width:500px;"
          />
        </el-form-item>
        <el-form-item
          v-if="newCourseForm.guide=='open'"
          label="二维码标题"
          prop="guideTitle"
          class="inner-label"
        >
          <el-input
            v-model="newCourseForm.guideTitle"
            placeholder="请输入二维码标题"
            maxlength="14"
            style="width:500px;"
          />
        </el-form-item>
        <el-form-item
          v-if="newCourseForm.guide=='open'"
          label="二维码上传"
          prop="guideImg"
          class="inner-label"
        >
          <el-upload
            :show-file-list="false"
            :on-success="handleQRcodeSuccess"
            :before-upload="beforeQRcodeUpload"
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
          >
            <img v-if="newCourseForm.guideImg" :src="newCourseForm.guideImg" class="qr-avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon qr-code" />
          </el-upload>
          <div class="hint-color">建议尺寸750*750px的正方形二维码图片，您可选取群二维码，公众号二维码等，jpg\png格式，图片小于1M</div>
        </el-form-item>
      </el-form-item>
      <el-form-item label="题型通知设置" class="multistage">
        <div class="hint-color">目前面授通知类型有上课提醒、成功预约通知、预约取消通知、课节调整通知、签到通知</div>
        <el-form-item label="服务号通知" class="inner-label">
          <el-radio-group v-model="newCourseForm.severNumber">
            <el-radio label="open">开启</el-radio>
            <el-radio label="close">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="短信通知" class="inner-label">
          <el-radio-group v-model="newCourseForm.noteInform">
            <el-radio label="open">开启</el-radio>
            <el-radio label="close">关闭</el-radio>
          </el-radio-group>
          <div class="hint-color">
            目前剩余短信为0条，暂时无法发送短信
            <a style="color:#2c90ee;">立即充值</a>
          </div>
        </el-form-item>
      </el-form-item>
      <div class="nav-title">上架设置</div>
      <el-form-item label="上架设置" prop="putawaySet" class="putawaySet">
        <el-radio-group v-model="newCourseForm.putawaySet">
          <el-radio label="now">立即上架</el-radio>
          <el-radio label="timing">
            定时上架，设置上架时间
            <el-date-picker
              v-model="newCourseForm.putawayTime"
              :picker-options="pickerOptions0"
              :disabled="newCourseForm.putawaySet!=='timing'"
              type="datetime"
              placeholder="选择日期"
            />
          </el-radio>
          <el-radio label="defer">暂不上架</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="foot-btn">
      <el-button @click="cancelForm">取消</el-button>
      <el-button type="primary" @click="saveForm">保存</el-button>
    </div>
    <!-- 选择课程弹框 -->
    <createCourseDialog
      :dialog="selectCourseDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmCourseClick"
    />
    <!-- 选择校区弹框 -->
    <createCampusDialog
      :dialog="selectCampusDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmCampusClick"
    />
    <!-- 选择老师弹框 -->
    <createTeacherDialog
      :dialog="selectTeacherDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmTeacherClick"
    />
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import createCourseDialog from '../class/coursedialog'
import createCampusDialog from '../classroom/campusdialog'
import createTeacherDialog from '../aligncourse/teacherdialog'

export default {
  components: {
    Tinymce,
    createCourseDialog,
    createCampusDialog,
    createTeacherDialog
  },
  data() {
    return {
      // 限制input只能为数字
      oninput: "value=value.replace(/[\u4E00-\u9FA5]/g,'')",
      isSubmit: true,
      courseList: [],
      classInfoList: [],
      newCourseForm: {
        id: '1',
        course: '',
        courseId: '',
        courseName: '',
        courseIntro: '',
        imageUrl: '',
        courseInfo: '',
        courseType: 'trial',
        articlePrice: '',
        linePrice: '',
        articleNum: '',
        restriction: '',
        startClassTime: '',
        endClassTime: '',
        teacher: '',
        teacherId: '',
        campus: '',
        guide: 'open',
        guideWriting: '',
        guideTitle: '',
        guideImg: '',
        severNumber: 'open',
        noteInform: 'open',
        putawaySet: 'now',
        hourTable: [
          {
            courseHour: '',
            name: '',
            price: '',
            number: ''
          }
        ],
        timeTable: [
          {
            courseTime: '',
            period: '',
            name: '',
            price: '',
            number: ''
          }
        ],
        classTable: [
          {
            grade: '',
            startTime: '',
            endTime: '',
            name: '',
            price: '',
            number: ''
          }
        ]

      },
      periodOptions: [
        {
          value: 'day',
          label: '天'
        },
        {
          value: 'month',
          label: '月'
        },
        {
          value: 'season',
          label: '季'
        },
        {
          value: 'year',
          label: '年'
        }
      ],
      gradeOptions: [],
      newCourseRules: {
        courseName: [{ required: true, message: '请输入正式课名称程', trigger: 'blur' }],
        imageUrl: [{ required: true, message: '体验课封面不能为空', trigger: 'blur' }],
        courseType: [{ required: true, message: '请选择面授课类型', trigger: 'change' }],
        course: [{ required: true, message: '请选择关联课程', trigger: 'blur' }],
        sellWay: [{ required: true, message: '请输入售卖方式', trigger: 'change' }],
        articlePrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
        guideWriting: [{ required: true, message: '请输入引导关注文案', trigger: 'blur' }],
        guideTitle: [{ required: true, message: '请输入请输入二维码标题', trigger: 'blur' }],
        guideImg: [{ required: true, message: '请上传二维码', trigger: 'blur' }],
        putawaySet: [{ required: true, message: '请选择上架设置', trigger: 'change' }]
      },
      selectCourseDialog: false,
      selectCampusDialog: false,
      selectClassroomDialog: false,
      selectTeacherDialog: false,
      // 开始时间限制
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.newCourseForm.endTime) {
            return time.getTime() < Date.now() - 8.64e7 || time.getTime() > this.newCourseForm.endClassTime
          } else {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      },
      // 结束时间限制
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() < this.newCourseForm.startClassTime
        }
      }
    }
  },
  mounted() {
    // 获取排课页面授课课程id
    this.courseId = this.$route.query.courseId
    console.log(this.courseId)
  },
  methods: {
    // 课程封面上传
    handleAvatarSuccess(res, file) {
      this.newCourseForm.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传图片格式不正确')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    // 关注引导二维码上传
    handleQRcodeSuccess(res, file) {
      this.newCourseForm.guideImg = URL.createObjectURL(file.raw)
    },
    beforeQRcodeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片格式不正确')
      }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      return isJPG && isLt1M
    },
    hourRemove(index) {
      if (this.newCourseForm.hourTable.length > 1) {
        this.newCourseForm.hourTable.splice(index, 1)
      } else {
        this.$message.error('至少保留一条数据')
      }
    },
    addHour() {
      this.newCourseForm.hourTable.push({
        hourValue: '',
        priceValue: ''
      })
    },
    timeRemove(index) {
      if (this.newCourseForm.timeTable.length > 1) {
        this.newCourseForm.timeTable.splice(index, 1)
      } else {
        this.$message.error('至少保留一条数据')
      }
    },
    addTime() {
      this.newCourseForm.timeTable.push({
        timeValue: '',
        periodValue: 'day',
        priceValue: ''
      })
    },
    addClassHour() {
      this.newCourseForm.classTable.push({
        timeValue: '',
        periodValue: 'day',
        priceValue: ''
      })
    },
    classHourRemove(index) {
      if (this.newCourseForm.classTable.length > 1) {
        this.newCourseForm.classTable.splice(index, 1)
      } else {
        this.$message.error('至少保留一条数据')
      }
    },
    cancelClick() {
      this.selectCourseDialog = false
      this.selectCampusDialog = false
      this.selectClassroomDialog = false
      this.selectTeacherDialog = false
    },
    classSelectClick(e, index) {
      this.newCourseForm.classTable[index].startTime = e.startTime
      this.newCourseForm.classTable[index].endTime = e.endTime
    },
    // 接收选择课程弹框事件
    confirmCourseClick(data) {
      this.selectCourseDialog = false
      this.newCourseForm.courseId = data.id
      this.newCourseForm.course = data.name
      // 通过id请求对应课程数据
      this.courseList = ['按课时', '按时段', '按班级']
      var list = [
        {
          id: '1',
          className: '语文作文',
          startTime: '2019-06-01',
          endTime: '2019-06-05'
        },
        {
          id: '2',
          className: '数学',
          startTime: '2019-06-22',
          endTime: '2019-06-29'
        }
      ]
      this.gradeOptions = list.map((res) => {
        return {
          id: res.id,
          value: res.className,
          label: res.className,
          startTime: res.startTime,
          endTime: res.endTime
        }
      })
    },
    // 接收选择校区弹框事件
    confirmCampusClick(data) {
      this.selectCampusDialog = false
      this.newCourseForm.campus = data.name
      this.newCourseForm.campusId = data.id
    },
    // 接收选择老师弹框事件
    confirmTeacherClick(data) {
      this.selectTeacherDialog = false
      this.newCourseForm.teacher = data.name
      this.newCourseForm.teacherId = data.id
    },
    // 保存
    saveForm() {
      this.judgeTable()
      this.$refs.newCourseForm.validate((valid) => {
        if (valid) {
          if (this.isSubmit) {
            this.$refs.newCourseForm.resetFields()
            alert('通过')
            this.$router.go(-1)
          }
        } else {
          return false
        }
      })
    },
    // 取消
    cancelForm() {
      this.$refs.newCourseForm.resetFields()
      this.$router.go(-1)
    },
    judgeTable() {
      if (this.newCourseForm.courseType === 'official' && this.newCourseForm.courseId) {
        this.isSubmit = true
        switch (this.newCourseForm.sellWay) {
          case 'hour':
            this.newCourseForm.hourTable.map((item) => {
              for (const key in item) {
                if (item.hasOwnProperty(key)) {
                  if (item[key] === null || item[key] === '') {
                    this.isSubmit = false
                    return
                  }
                }
              }
            })
            console.log(this.isSubmit)
            break
          case 'time':
            this.newCourseForm.timeTable.map((item) => {
              for (const key in item) {
                if (item.hasOwnProperty(key)) {
                  if (item[key] === null || item[key] === '') {
                    this.isSubmit = false
                    return
                  }
                }
              }
            })
            break
          default:
            this.newCourseForm.classTable.map((item) => {
              for (const key in item) {
                if (item.hasOwnProperty(key)) {
                  if (item[key] === null || item[key] === '') {
                    this.isSubmit = false
                    return
                  }
                }
              }
            })
            break
        }
        if (!this.isSubmit) {
          this.$message({
            type: 'warning',
            message: '请完善售卖方式信息'
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.newFaceCourse {
  padding: 0 20px;
  padding-bottom: 50px;
  .nav-title {
    padding-left: 10px;
    margin: 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #353535;
    border-left: 2px solid #2377e6;
  }
  .course-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 480px;
    height: 60px;
    padding: 10px 20px 10px 10px;
    color: #353535;
    font-size: 0;
    background: #f5f7fa;
    .course-title {
      width: 210px;
      overflow: hidden;
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .foot-btn {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: calc(100vw - 180px);
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #eee;
    text-align: center;
    background-color: #fff;
    z-index: 9;
  }
  /deep/.avatar-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 260px;
      height: 195px;
      line-height: 195px;
      text-align: center;
    }
    .avatar-uploader-icon.qr-code {
      width: 120px;
      height: 120px;
      line-height: 120px;
    }
    .avatar {
      width: 260px;
      height: 195px;
      display: block;
    }
    .qr-avatar {
      width: 120px;
      height: 120px;
      display: block;
    }
  }
  .chargeStandard {
    margin-top: 20px;
    margin-left: 120px;
    width: 800px;
    /deep/.el-table td,
    /deep/.el-table th {
      padding: 0;
    }
    /deep/.el-table__body {
      .el-table__row {
        height: 50px;
      }
    }
    .add-foot {
      text-align: center;
      border-bottom: 1px solid #eee;
      margin-bottom: 30px;
    }
    .timeInput {
      width: 150px;
      /deep/.el-input-group__append,
      .el-input-group__prepend {
        background-color: #fff;
        /* color: #909399; */
        vertical-align: middle;
        display: table-cell;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 0px 16px;
        width: 60px;
        white-space: nowrap;
      }
    }
  }
  .hint-color {
    color: #676767;
  }
  .multistage {
    .inner-label {
      margin-left: -38px;
      margin-bottom: 18px;
      /deep/.el-form-item__label {
        font-weight: 400;
      }
    }
  }
  .putawaySet {
    /deep/.el-radio {
      display: block;
      height: 36px;
      line-height: 36px;
    }
  }
}
</style>
